/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, TouchableHighlight } from 'react-native';
import { Icon } from 'antd-mobile-rn';

// project
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../../library/comp';

import Licon from '../../../../library/comp/project/icon';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

 export default class UserSettingCar extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor(props) {
        super(props);
        // this.Nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
            // 车辆列表变量
            carList:[
                {
                    id:1,
                    set_number:"冀F115VR",
                },
                {
                    id:2,
                    set_number:"冀F116VR",
                },
                {
                    id:3,
                    set_number:"冀F117VR",
                },
                {
                    id:4,
                    set_number:"冀F118VR",
                },

            ],
        };

    }

    /**
     * didMount
     */
    componentDidMount(){
        // http请求
        // HttpTemp.get({
        //     url:"/CPage/mycar/list.php",
        //     success:(res) => {
        //         let data = res.data;
        //         this.setState({
        //             carList:data,
        //         })
        //     }
        // })


    }




    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
        return(
            <CPage>

                <CContent bg='rgba(248, 248, 248, 1)' mt='96'>


                    {
                        this.state.carList.length == 0 ?

                        /* 如果车辆列表为空的话，显示一张空页图片 */
                        <View style={[ this.state.carList.length != 0 ? { display:"none"} : { } ]}>
                            <CItemY x="cener" mt="100"> 
                                <CIcon width="150" height="150" color="#999" icon={ Licon["mycar-list"] }></CIcon>
                                <CText color="#999" size="30">
                                还没有添加车辆，
                                    <CText color="#00CC66" size="30" 
                                    onPress={
                                        (e)=>{
                                            //添加车辆的链接
                                            console.log("添加");
                                        }
                                    }>
                                    立即添加!
                                    </CText>
                                </CText>
                            </CItemY>
                        </View>
                        :
                        /* 如果车辆列表不为空的话，显示我的车辆 */
                        <View style={[this.state.carList.length == 0 ? { display:"none"} : { } ]}>
                        {this.state.carList.map((item,index)=>{
                            return(
                                <TouchableHighlight
                                    onPress={
                                        ()=>{
                                            //这里跳链接
                                            console.log(item);
                                        }
                                    }
                                >
                                    <CItemX h="100" mt="20" bg="white" y="center" mx='20' ra='8'
                                    > 
                                        <View style={{ flex:0.05 }}></View>
                                            <CText size='34' f="1">{ item.set_number }</CText>
                                        <View style={{ flex:0.05 }}></View>
                                    </CItemX>
                                </TouchableHighlight>
                            )
                        })}    
                        </View>
    
                    }



                </CContent>

                {/* 顶部 star */}
                <CHeader h='96' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <CBetween px='20'>
                        <CHand  onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </CHand>

                        <CText size='34'>我的车辆</CText>

                        <CHand
                            onPress={ ()=>{ 
                                // this.Nav.navigate('UserSettingCarAdd');
                                console.log("添加");
                            }}>
                            <CText size='26'>添加</CText>
                        </CHand>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}

            </CPage>
        )
    }
}

